<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            position: relative;
            background-color: #f5f5f5;
        }

        .first {
            width: 500px;
            height: 40px;
            margin: 100px auto;
        }

        .first input {
            width: 300px;
            height: 38px;
            border: 1px solid #e38a0e;
            outline: none;
            margin-top: 20px;
            padding-left: 10px;
        }

        .first button {
            margin-top: 10px;
            width: 100px;
            color: white;
            border: none;
            height: 40px;
            background-color: #e38a0e;
        }

        table {
            width: 400px;
            height: 200px;
            margin: 150px auto;
            background-color: white;
        }

        table thead {
            height: 40px;
            text-align: center;
        }

        table tbody {
            height: 100px;
            text-align: center;
        }

        table tr {
            height: 40px;
            text-align: center;
        }

        table tr th {
            height: 40px;
            width: 40px;
            border: 1px solid #e38a0e;

        }

        table tr td {
            height: 40px;
            width: 40px;
            border: 1px solid #e38a0e;
        }

        table tr td button {
            width: 40px;
            height: 40px;
            border: none;
            color: #e38a0e;
            background-color: white;
            outline: none;
        }

        h1 {
            margin-top: 30px;
            text-align: center;
            color: #e38a0e;
        }

        .red {
            color: red;
        }

        a {
            position: absolute;
            bottom: 10px;
            right: 20px;
            display: block;
            width: 100px;
            height: 30px;
            background-color: #e38a0e;
            color: #fff;
            text-align: center;
            line-height: 30px;
            text-decoration: none;
        }
    </style>
</head>

<body>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <div id="app">
        <h1>
            成绩管理
        </h1>
        <div class="first">
            科目： <input type="text" placeholder="请输入科目" v-model="subject" @keyup.enter="Add"><br>
            分数： <input type="text" placeholder="请输入成绩" v-model.number="score" @keyup.enter="Add"><br>
            <button @click="Add">添加</button>
        </div>
        <table cellspacing="0">
            <thead>
                <tr>
                    <th>编号</th>
                    <th>科目</th>
                    <th>成绩</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody v-if="list.length>0">
                <tr v-for="(item,index) in list" :key="id">
                    <td>{{index+1}}</td>
                    <td>{{item.name}}</td>
                    <td :class="{red:item.score<60}">{{item.score}}</td>
                    <td><button @click="del(item.id)">删除</button></td>
                </tr>
            </tbody>
            <tbody v-if="list.length<=0">
                <tr>
                    <td colspan="4" rowspan="4">暂无数据</td>
                </tr>
            </tbody>
            <tr>
                <td colspan="4">总分：{{sumScore}} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;平均分：{{averageScore}}</td>
            </tr>
        </table>
    </div>
    <a href="/首页.html">返回</a>
    <script>
        const { createApp } = Vue
        createApp({
            data() {
                return {
                    list: [
                        // { id: 1, name: '语文', score: 56 },
                        // { id: 2, name: '数学', score: 76 },
                        // { id: 3, name: '英语', score: 55 },
                    ],

                    subject: '',
                    score: '',
                    sum: 0,
                    average: 0,
                }
            },
            mounted() {
                this.list = JSON.parse(localStorage.getItem('performance')) || []
            },
            methods: {
                Add() {
                    if (this.subject != '' && this.score != '') {
                        this.list.push({
                            id: this.list.length + 1,
                            name: this.subject,
                            score: this.score
                        })
                        localStorage.setItem('performance', JSON.stringify(this.list))
                        this.subject = ''
                        this.score = ''
                    }
                    else {
                        alert('请输入完整数据')
                    }
                },
                del(id) {
                    this.list = this.list.filter(item => item.id !== id)
                    localStorage.setItem('performance', JSON.stringify(this.list))
                }
            },
            computed: {
                sumScore() {
                    this.sum = 0
                    this.list.forEach(item => {
                        this.sum += item.score
                    })
                    return this.sum
                },
                averageScore() {
                    this.average = 0
                    this.list.forEach(item => {
                        this.average += item.score
                    })
                    if (this.list.length == 0) {
                        return 0
                    }
                    return (this.average / this.list.length).toFixed(0)
                }
            }
        }).mount('#app')
    </script>
</body>

</html>